<template>
  <div>
    <!-- 顶部导航 -->
    <el-header class="header" height="70px">
      <div class="header-content">
        <div class="logo">
          <h1>周周淘商城</h1>
        </div>
        <div class="search">
          <el-input
              v-model="searchKeyword"
              placeholder="搜索商品"
              class="search-input"
              @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button @click="handleSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
        <div class="nav-actions">
          <el-button @click="$router.push('/cart')" type="primary" plain>
            <el-icon><ShoppingCart /></el-icon>
            购物车
            <el-badge v-if="cartCount > 0" :value="cartCount" class="cart-badge" />
          </el-button>
          <template v-if="userStore.token">
            <el-dropdown @command="handleUserCommand">
              <el-button type="primary">
                {{ userStore.userInfo?.username || '用户' }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button @click="$router.push('/login')" type="primary">登录</el-button>
            <el-button @click="$router.push('/register')" plain>注册</el-button>
          </template>
        </div>
      </div>
    </el-header>

    <!-- 轮播图 -->
    <section class="banner-section">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.image" :alt="banner.title" class="banner-image">
          <div class="banner-content">
            <h2>{{ banner.title }}</h2>
            <p>{{ banner.description }}</p>
            <el-button type="primary" size="large" @click="handleBannerClick(banner)">
              {{ banner.buttonText }}
            </el-button>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 商品分类 -->
    <section class="category-section">
      <div class="section-header">
        <h2>商品分类</h2>
      </div>
      <el-row :gutter="20">
        <el-col
            v-for="category in categories"
            :key="category.id"
            :xs="12"
            :sm="8"
            :md="6"
        >
          <el-card
              class="category-card"
              shadow="hover"
              @click="handleCategoryClick(category)"
          >
            <div class="category-content">
              <img v-if="category.icon.includes('.jpg') || category.icon.includes('.png') || category.icon.includes('.gif')" :src="category.icon" class="category-image" alt="" />
              <el-icon v-else :size="40" class="category-icon">
                <component :is="category.icon" />
              </el-icon>
              <h3>{{ category.name }}</h3>
              <p>{{ category.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, ShoppingCart, ArrowDown, Goods } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

// 引入GIF图片
import ad1Gif from '@/assets/电器家具图片.gif'
import ad2Gif from '@/assets/电子商品.gif'
import ad3Gif from '@/assets/日用百货.gif'

// 引入分类图标图片
import categoryDigital from '@/assets/数码.jpg'
import categoryAppliance from '@/assets/电器.jpg'
import categoryMaternal from '@/assets/母婴.jpg'
import categoryLuggage from '@/assets/箱包.jpg'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const searchKeyword = ref('')
const cartCount = ref(0) // 这里后续会从购物车store获取

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '电器家电大促',
    description: '品质生活 智享未来',
    image: ad1Gif,
    buttonText: '立即选购',
    link: '/products?category=电器'
  },
  {
    id: 2,
    title: '数码产品狂欢',
    description: '潮流科技 新体验',
    image: ad2Gif,
    buttonText: '立即抢购',
    link: '/products?category=电子商品'
  },
  {
    id: 3,
    title: '日用百货大促狂欢',
    description: '好货低价等你来',
    image: ad3Gif,
    buttonText: '查看详情',
    link: '/products?category=日用百货'
  }
])

// 商品分类
const categories = ref([
  {
    id: 1,
    name: '数码产品',
    description: '手机、电脑、平板',
    icon: categoryDigital,
    link: '/products?category=手机'
  },
  {
    id: 2,
    name: '家用电器',
    description: '电视、空调、冰箱',
    icon: categoryAppliance,
    link: '/products?category=曲面电视'
  },
  {
    id: 3,
    name: '母婴用品',
    description: '奶粉、尿布、玩具',
    icon: categoryMaternal,
    link: '/products?category=拉拉裤'
  },
  {
    id: 4,
    name: '箱包配饰',
    description: '包包、行李箱、配饰',
    icon: categoryLuggage,
    link: '/products?category=真皮包'
  }
])

// 方法
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push(`/products?keyword=${encodeURIComponent(searchKeyword.value)}`)
  }
}

const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'orders':
      router.push('/orders')
      break
    case 'logout':
      userStore.logout()
      ElMessage.success('已退出登录')
      router.push('/')
      break
  }
}

const handleBannerClick = (banner: any) => {
  router.push(banner.link)
}

const handleCategoryClick = (category: any) => {
  router.push(category.link)
}
</script>

<style scoped>
/* 头部样式 */
.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  color: #409eff;
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.search {
  flex: 1;
  max-width: 400px;
  margin: 0 40px;
}

.search-input {
  width: 100%;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cart-badge {
  margin-left: 5px;
}

/* 轮播图 */
.banner-section {
  margin-bottom: 40px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* 商品分类 */
.category-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.category-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-content {
  text-align: center;
  padding: 20px;
}

.category-icon {
  margin-bottom: 15px;
  color: #409eff;
}

.category-image {
  width: 60px; /* 根据需要调整图片大小 */
  height: 60px; /* 根据需要调整图片大小 */
  object-fit: contain;
  margin-bottom: 15px;
}

.category-content h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.category-content p {
  margin: 0;
  color: #666;
}

/* 响应式 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 15px 20px;
  }

  .search {
    margin: 15px 0;
    max-width: 100%;
  }

  .banner-content {
    left: 20px;
    right: 20px;
  }

  .banner-content h2 {
    font-size: 24px;
  }

  .banner-content p {
    font-size: 16px;
  }
}
</style>
